<template>
    <div class="News">
        <ul>
            <li v-for="item,index in newList" :key="index">
                <button @click="doDetail(item)">查看详情</button>
                <RouterLink :to="{
                    name:'detail',
                    params:{
                        id:item.id,
                        name:item.name,
                        content:item.content}
                        }"
                    >{{ item.name }}</RouterLink>
            </li>
        </ul>
        <!-- 展示区 -->
        <div class="news-contents">
            <RouterView/>
        </div>
    </div>
</template>

<script setup lang="ts" name="News">
    import { reactive } from 'vue'
    import { RouterView , RouterLink , useRouter} from 'vue-router'
    const newList = reactive([
        {id:'1',name:'很好的食物',content:'西兰花'},
        {id:'2',name:'好玩',content:'原神'},
        {id:'3',name:'好吃',content:'蛋糕边'},
        {id:'4',name:'好看',content:'雷神'},
    ])
    let router = useRouter()
    console.log(router)
    
    interface NewsInter {
        id:string,
        name:string,
        content:string
    }

    let doDetail = (item:NewsInter)=>{
        // 编程式导航 push是有历史记录的
        // replace 是没有历史记录
        router.push({
            name:'detail',
            query:{
                id:item.id,
                name:item.name,
                content:item.content
            }
        })
    }
</script>

<style scoped>
.News{
    display: flex;
    align-items: center;
    height:100%;
}
</style>